<%@ page language="java" pageEncoding="UTF-8"%>
<!--分页查询共用的页面-->
<%@ include file="/common/common.jsp"%>

</head>

<script type="text/javascript" charset="utf-8">
////////////////////////////////////////////////////////////////解决$.browser被移除的问题
jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();

//////////////////////////////////////////////////////////////变量
var us_m = {};


/////////////////////////////////////////////////////////////控件事件

us_m.reset = function(){
	$("#queryForm")[0].reset();
}



//////////////////////////////////////////////////////////////格式化数据

	//删除表格的某一行，删除后，会自动刷新表格			
	function getDeleteActionColumn(alue, rowData, rowIndex) {
		var entityId = rowData.userId;
		var html = "<img style='cursor: pointer;' src='<%=imgPath%>/cross.gif' onclick=\"Utility.deleteEntity('<%=ApplicationPath%>/user/fakeDelete.action','" + entityId + "');\"/>";
		return html;
	}
	//编辑列
	function getEditActionColumn(value, rowData, rowIndex) {
		var entityId = rowData.userId;
		var html = "<a href=\"javascript:InfoWindow.viewUser('" + entityId + "');\">" + " 编辑</a>";
		return html;

	}
	//格式化用户类型文字描述
	function formatUserTypeData(value,rowData,rowIndex){
		let str = '';
		switch (value) {
			case 'admin':
				str = '管理员';
				break;
			case 'manager':
				str = '一级用户';
				break;
			case 'monitor':
				str = '二级用户';
				break;
			case 'common':
				str = '普通用户';
				break;
		}
		return str;
	}


//////////////////////////////////////////////////////////////加载后执行
	$(document).ready(function () {

		//用户类型下拉框
		$("#userType").lookup({ category: "UserType" });
		//用户状态下拉框
		$("#userState").lookup({ category: "UserState" });
		//ajax填充下拉框数据 角色下拉框
		$("#roleId").lookup({ queryID: "selectRoleList" });
		$("#btnQuery").click(function () {
			Utility.loadGridWithParams();
		});
		// Utility.loadGridWithParams();
		$("#roleId").change(function () {
			var txt = $("#roleId").find("option:selected").text();
			$("#roleName").val(txt);
		});
		$("#userState").change(function () {
			var txt = $("#userState").find("option:selected").text();
			$("#userStateName").val(txt);
		});
	});
</script>

<body style="background-color:rgb(251,251,251);height:100%;" class="base_ver_flexStartDiv_css">
	<div id="toolbar" style="width:100%;">
		<form id="queryForm" action="<%=ApplicationPath%>/user/paginate.action">
			<input type="hidden" name="queryId" value="user.selectUsers" />
			<!--对应的Ibatis的sql查询Id -->
			<input type="hidden" name="fileName" value="用户信息" />
			<!--以下字段用于得到下拉框的选中文本信息，用于写入导出到excel查询条件中-->
			<input type="hidden" id="roleName" name="roleName" value="" />
			<input type="hidden" id="userStateName" name="userStateName" value="" />
			<!--顶层按钮栏-->
			<div style="width:80%;margin-left: 15px;margin-top:5px;">
				<a id="btnNew" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-plus blue-icon'" onclick="InfoWindow.viewUser(0);" >添加</a>
				&nbsp;&nbsp;
				<a id="btnExport" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-file-excel-o blue-icon'" 
						onclick="Utility.excelExport('<%=ApplicationPath%>/export.action');">导出</a>
				&nbsp;&nbsp;
				<a id="btnReset" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-close blue-icon'" onclick="us_m.reset();">重置</a>
			</div>
			<hr>
			<div style="width:100%;height:30px;display: flex;justify-content: flex-start;align-items: flex-end;">
				<div>
					<span>登录账号: </span>
					<input type="text" name="loginName" size="10" id="loginName">
				</div>
				&nbsp;&nbsp;
				<div style="margin-left:5px;">
					<span>用户名: </span>
					<input type="text" name="name"  size="10">
				</div>
				&nbsp;&nbsp;
				<div>
					<span>角色: </span>
					<select id="roleId" name="roleId" width="10"></select>
				</div>
				&nbsp;&nbsp;
				<div>
					<span>用户类型: </span>
					<select id="userType" name="userType" width="10"></select>
				</div>
				&nbsp;&nbsp;
				<div>
					<span>用户状态: </span>
					<select id="userState" name="userState" width="10"></select>
				</div>
				<div style="margin-left:15px;margin-top:5px;">
					<a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-search blue-icon'">查询</a>&nbsp;
					<!-- <a id="btnReset" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-close blue-icon'">重置</a>&nbsp;
					<a id="btnNew" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-plus blue-icon'" 
						onclick="InfoWindow.viewUser(0);">新增</a>&nbsp;
					<a id="btnExport" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-file-excel-o blue-icon'" 
						onclick="Utility.excelExport('<%=ApplicationPath%>/export.action');">导出</a> -->
				</div>
			</div>
		</form>

	</div>
	<div style="flex:1;width:100%;">
		<table id="queryGrid" class="easyui-datagrid" style="width:100%;" data-options="pagination:true,pageSize:15,singleSelect:true,rownumbers:true,striped:true,fitColumns: true,
									pageList: [15, 20, 50, 100, 150, 200],fit:true,
									url:'<%=ApplicationPath%>/user/paginate.action',method:'get'">
			<thead>
				<tr>
					<th data-options="field:'loginName'" width="10%">用户账号</th>
					<th data-options="field:'name'" width="10%">用户姓名</th>
					<th data-options="field:'roleName'" width="12%">用户角色</th>
					<th data-options="field:'userType',formatter:formatUserTypeData" width="12%">用户类型</th>
					<th data-options="field:'phoneNo'" width="10%">联系电话</th>
					<th data-options="field:'userState'" width="10%">用户状态</th>
					<th data-options="field:'owner'" width="12%">创建人</th>
					<th data-options="field:'createDate'" width="12%">创建日期</th>
					<th data-options="field:'1',formatter:getEditActionColumn" width="5%">编辑</th>
					<th data-options="field:'2',formatter:getDeleteActionColumn" width="5%">删除</th>
				</tr>
			</thead>
		</table>
	
	</div>

</body>